<template>
    <div class="company-user-list">
        <ul class="global-operation-list">
            <li class="global-operation-left">
                <ul class="global-filter-list">
                    <li class="global-filter-item">
                        <h2 class="global-filter-item-title">关键字：</h2>
                        <el-input placeholder="媒体方名称" v-model="searchForm.keyword" style="width: 250px" clearable
                            @change="getPost"></el-input>
                    </li>
                    <li class="global-filter-item">
                        <el-button type="primary" class="global-filter-item-search" @click="rePosts">搜索</el-button>
                    </li>
                    <li class="global-filter-item">
                        <el-button type="success" class="global-filter-item-search" v-if="operationList.includes('add')"
                            @click="add">添加</el-button>
                    </li>
                </ul>
            </li>
        </ul>
        <div class="global-table-content">
            <div class="global-table-content-a">
                <el-table :data="dataList" style="width: 100%" :row-style="{ height: '0' }"
                    :cell-style="{ padding: '3px' }" max-height="620" border v-loading="tableLoading">
                    <el-table-column prop="id" label="编号" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column prop="mediaPartyName" label="媒体方名称" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column prop="mediaPartyPic" label="媒体方logo">
                        <template slot-scope="scope">
                            <el-image v-if="scope.row.mediaPartyPic" style="width: 60px; height: 60px"
                                :src="scope.row.mediaPartyPic" :preview-src-list="[scope.row.mediaPartyPic]"
                                fit="fill"></el-image>
                        </template>
                    </el-table-column>
                    <el-table-column fixed="right" label="操作" width="250">
                        <template slot-scope="scope">
                            <div style="display: flex;">
                                <div>
                                    <el-button type="primary" @click="doEdit(scope.row)">编辑</el-button>
                                </div>
                                <div style="padding-left: 40px;">
                                    <el-button type="danger" @click="doDel(scope.row)">删除</el-button>
                                </div>
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="global-page">
                    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                        :page-sizes="pageSizes" :page-size="pageSize" :current-page="pageNum" background
                        layout="sizes, total, prev, pager, next" :total="total">
                    </el-pagination>
                </div>
            </div>
        </div>

        <el-dialog :title="dialogTitle" :visible.sync="dialogVisible">
            <el-form :model="form" :rules="rules" ref="ruleForm">
                <el-form-item label="媒体方名称" prop="mediaPartyName" :label-width="formLabelWidth">
                    <el-input v-model="form.mediaPartyName" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="媒体方logo" prop="mediaPartyPic" :label-width="formLabelWidth">
                    <el-upload class="avatar-uploader" action="/checkorder/manager/pc/user/uploadFile" drag
                        :show-file-list="false" :data="{ token: $store.state.token }"
                        :on-success="(response, file, fileList) => handleAvatarSuccessMediaPartyPic(response)">
                        <img v-if="form.mediaPartyPic" :src="form.mediaPartyPic" class="avatar" />
                        <i v-else class="el-icon-plus avatar-uploader-icon"
                            style="height: 100px;width: 100px;line-height: 100px !important"></i>
                        <div slot="tip" class="el-upload__tip" style="color: #919baf">
                            只能上传jpg/png文件
                        </div>
                    </el-upload>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="submit">确 定</el-button>
            </div>
        </el-dialog>

    </div>
</template>

<script>
import APIMediaParty from "@/api/apiMediaParty";
export default {
    name: "MediaPartyList",
    components: {},
    props: {
        operationList: Array,
        isShow: Boolean,
    },
    data() {
        return {
            // 表格相关
            tableLoading: true,
            dataList: [],
            pageSize: 20,
            pageNum: 1,
            total: 0,
            pageSizes: [15, 20, 50],
            tokenData: {
                token: "",
            },
            searchForm: {
                keyword: null,
            },
            form: {
                mediaPartyName: '',
                mediaPartyPic: '',
                mediaPartyId: null,
            },
            formLabelWidth: '120px',
            rules: {
                mediaPartyName: { required: true, message: '请输入媒体方名称', trigger: 'blur' },
            },
            userInfo: {},
            dialogVisible: false,
            dialogTitle: '新增',
        };
    },
    activated() {
        this.tokenData.token = this.$store.state.token;
        this.userInfo = JSON.parse(localStorage.getItem("mujinguserInfo"))
        this.getPost()
    },
    methods: {
        handleAvatarSuccessMediaPartyPic: function (e) {
            if (e.key == 1000) {
                this.form.mediaPartyPic = e.result.data;
                this.$message.success({
                    showClose: true,
                    message: "上传成功",
                    duration: 1500
                });
            }
        },
        delRow(row) {
            let params = {
                id: row.id
            }
            APIMediaParty.doDelMediaParty(params).then((res) => {
                if (res.key === 1000) {
                    this.$message({
                        message: '删除成功',
                        type: 'success'
                    });
                    this.getPost()
                }
            });
        },
        doDel(row){
            let that = this
            this.$confirm('确定删除该数据？', '', {
                distinguishCancelAndClose: true,
                confirmButtonText: '确定',
                cancelButtonText: '取消'
            })
                .then(() => {
                    that.delRow(row)
                })
                .catch(action => {
                });
        },
        doEdit(row){
            this.form = {
                mediaPartyId: row.id,
                mediaPartyName: row.mediaPartyName,
                mediaPartyPic: row.mediaPartyPic,
            }
            this.dialogVisible = true
            this.dialogTitle = '编辑'
        },
        submit() {
            this.$refs["ruleForm"].validate((valid) => {
                if (valid) {
                    const params = this.form
                    params.token = this.$store.state.token
                    if (this.form.mediaPartyId) {
                        params.id = this.form.mediaPartyId
                        APIMediaParty.doUpdateMediaParty(params).then((res) => {
                            if (res.key === 1000) {
                                this.$message({
                                    message: '修改成功',
                                    type: 'success'
                                });
                                this.getPost()
                                this.dialogVisible = false
                            }
                        });
                    } else {
                        APIMediaParty.doAddMediaParty(params).then((res) => {
                            if (res.key === 1000) {
                                this.$message({
                                    message: '添加成功',
                                    type: 'success'
                                });
                                this.getPost()
                                this.dialogVisible = false
                            }
                        });
                    }
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        add(){
            this.form = {
                mediaPartyId: null,
                mediaPartyName: '',
                mediaPartyPic: '',
            }
            this.dialogVisible = true
            this.dialogTitle = '新增'
        },
        formatterTime(time) {
            return this.$moment(time).format("YYYY-MM-DD HH:mm:ss");
        },
        // 全局初始化
        init() {
            // 搜索条件重置
            this.searchForm = {
                keyword: null,
            };
            this.rePosts();
        },
        // 分页pageSize改变
        handleSizeChange(e) {
            this.pageSize = e;
            this.rePosts();
        },
        // 分页pageNum改变
        handleCurrentChange(e) {
            this.pageNum = e;
            this.getPost();
        },
        // 重新请求
        rePosts() {
            this.pageNum = 1;
            this.dataList = [];
            this.getPost();
        },
        // 表格列表
        getPost() {
            this.tableLoading = true;
            const params = {
                token: this.$store.state.token,
                pageNum: this.pageNum,
                pageSize: this.pageSize,
            };
            if (this.searchForm.keyword) {
                params.keyword = this.searchForm.keyword
            }
            APIMediaParty.getMediaPartyList(params).then((res) => {
                if (res.key === 1000) {
                    res = res.result;
                    this.total = res.count;
                    res.list.forEach(item => {
                        if (item.createTime) {
                            item.createDate = this.formatterTime(item.createTime)
                        }
                    })
                    this.dataList = res.list;
                    this.tableLoading = false;
                }
            });
        },


    },
};
</script>

<style lang="sass">
</style>
<style lang="sass" scoped>

.global-operation-list
  padding-left: 0
.global-select .global-select-btn
  background: #FFFFFF
.global-table-content
  padding: 0
  background-color: white
  width: 100%
.global-table-content-a
  margin: 0 auto
  width: 90%
  padding: 20px 0
.company-user-list
  .global-operation-left
    margin-right: 0
</style>
